<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!-- 富文本编辑器 -->
    <link rel="stylesheet" href="/plugins/kindeditor/themes/default/default.css"/>
    <link rel="stylesheet" href="/plugins/bootstrap-fileinput/css/fileinput.min.css"/>
    <script charset="utf-8" src="/plugins/kindeditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="/plugins/kindeditor/lang/zh_CN.js"></script>


</head>

<body class="hold-transition skin-red sidebar-mini">

<!-- 正文区域 -->
<section class="content">

    <div class="box-body">

        <!--tab页-->
        <div class="nav-tabs-custom">

            <!--tab头-->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#home" data-toggle="tab">商品基本信息</a>
                </li>
                <li>
                    <a href="#pic_upload" data-toggle="tab">商品图片</a>
                </li>
                <li>
                    <a href="#customAttribute" data-toggle="tab">扩展属性</a>
                </li>
                <li>
                    <a href="#spec" data-toggle="tab">规格</a>
                </li>
            </ul>
            <!--tab头/-->

            <!--tab内容-->
            <div class="tab-content">

                <!--表单内容-->
                <div class="tab-pane active" id="home">
                    <div class="row data-type">
                        <div class="col-md-2 title">商品分类</div>

                        <div class="col-md-10 data">
                            <table>
                                <tr>
                                    <td>
                                        <select id="one" onchange="getTwo(this.value)" class="form-control">
                                        </select>
                                    </td>
                                    <td>
                                        <select id="two" onchange="getThree(this.value)"
                                                class="form-control select-sm"></select>
                                    </td>
                                    <td>
                                        <select id="three" onchange="getfire(this.value)"
                                                class="form-control select-sm"></select>
                                    </td>
                                    <td id="moban">
                                        模板ID:19
                                    </td>
                                </tr>
                            </table>

                        </div>


                        <div class="col-md-2 title">商品名称</div>
                        <div class="col-md-10 data">
                            <input type="text" class="form-control" placeholder="商品名称" id="sellerId1">
                        </div>

                        <div class="col-md-2 title">品牌</div>
                        <div class="col-md-10 data">
                            <select class="form-control" id="pinpai">

                            </select>
                        </div>

                        <div class="col-md-2 title">副标题</div>
                        <div class="col-md-10 data">
                            <input type="text" class="form-control" id="fu" placeholder="副标题" value="">
                        </div>

                        <div class="col-md-2 title">价格</div>
                        <div class="col-md-10 data">
                            <div class="input-group">
                                <span class="input-group-addon">¥</span>
                                <input type="text" class="form-control" id="jia" placeholder="价格" value="">
                            </div>
                        </div>

                        <div class="col-md-2 title editer">商品介绍</div>
                        <div class="col-md-10 data editer">
                            <textarea name="content" style="width:800px;height:400px;visibility:hidden;"
                                      id="editor"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">包装列表</div>
                        <div class="col-md-10 data rowHeight2x">

                            <textarea rows="4" class="form-control" id="bao" placeholder="包装列表"></textarea>
                        </div>

                        <div class="col-md-2 title rowHeight2x">售后服务</div>
                        <div class="col-md-10 data rowHeight2x">
                            <textarea rows="4" class="form-control" id="shou" placeholder="售后服务"></textarea>
                        </div>


                    </div>
                </div>

                <!--图片上传-->
                <div class="tab-pane" id="pic_upload">
                    <div class="row data-type">
                        <!-- 颜色图片 -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"
                                    data-toggle="modal"><i class="fa fa-file-o"></i> 新建
                            </button>

                        </div>

                        <table class="table table-bordered table-striped table-hover dataTable">
                            <thead>
                            <tr>

                                <th class="sorting">颜色</th>
                                <th class="sorting">图片</th>
                                <th class="sorting">操作</th>
                            </thead>
                            <tbody id="images">

                            </tbody>
                        </table>

                    </div>
                </div>


                <!--扩展属性-->
                <div class="tab-pane" id="customAttribute">
                    <div class="row data-type">
                        <table id="custom" style="width: 100%;">

                        </table>
                    </div>
                </div>

                <!--规格-->
                <div class="tab-pane" id="spec">
                    <div class="row data-type">
                        <div class="col-md-2 title">是否启用规格</div>
                        <div class="col-md-10 data">
                            <input type="checkbox">
                        </div>
                    </div>
                    <p>

                    <div>

                        <div class="row data-type" id="specId">
                            <table id="spec_table" class="table table-bordered table-striped table-hover dataTable">

                            </table>
                        </div>


                        <div class="row data-type">
                            <table class="table table-bordered table-striped table-hover dataTable" id="spec_table_id">
                                <thead>
                                <tr>
                                    <th class="sorting" id="th1">屏幕尺寸</th>
                                    <th class="sorting" id="th2">网络制式</th>
                                    <th class="sorting">价格</th>
                                    <th class="sorting">库存</th>
                                    <th class="sorting">是否启用</th>
                                    <th class="sorting">是否默认</th>
                                </tr>
                                </thead>
                                <tbody id="stockCount">
                                <tr>
                                    <td>
                                        4.0
                                    </td>
                                    <td>
                                        3G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        4.0
                                    </td>
                                    <td>
                                        4G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.0
                                    </td>
                                    <td>
                                        3G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.0
                                    </td>
                                    <td>
                                        4G
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="价格">
                                    </td>
                                    <td>
                                        <input class="form-control" placeholder="库存数量">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                    <td>
                                        <input type="checkbox">
                                    </td>
                                </tr>

                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>

            </div>
            <!--tab内容/-->
            <!--表单内容/-->

        </div>


    </div>
    <div class="btn-toolbar list-toolbar">
        <button class="btn btn-primary" onclick="add()"><i class="fa fa-save"></i>保存</button>
        <button class="btn btn-default">返回列表</button>
    </div>

</section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">上传商品图片</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped">
                    <tr>
                        <td>颜色</td>
                        <td><input class="form-control" placeholder="颜色" id="imageText"></td>
                    </tr>
                    <tr>
                        <td>商品图片</td>
                        <td>
                            <input type="file" id="myFile" name="image" multiple/>
                            <input name="itemImages" id="itemImages" type="hidden">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        getOne()
        //设置图片上传
        $('#myFile').fileinput({
            language: 'zh',
            uploadUrl: "/file/upload",
            // showCaption: true,    //显示框    默认是ture 显示      false  不显示
            // showUpload: true,     //默认true，设置为false是不显示右下角那个上传按钮
            // showRemove: true,     //默认true，设置为false是不显示右下角那个上传按钮
            // showClose: false,      //默认为true，设置为false时不显示右上角的小叉（这个叉的作用就是移除当前所有文件区中的文件）
            // showPreview: true,   //默认true，设置为false时默认不显示整个文件区，自然就无法拖曳文件进行上传了。
            // showCancel:false,　　       //默认true，只在ajax上传模式中可用，在上传过程中右下角有一个取消按钮，可以取消上传
            // showUploadedThumbs:true,　　//默认为true，这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存
            browseClass: 'btn btn-primary',//按钮样式
            allowedFileExtensions: ["txt", "gif", "png", "jpg", "mp4"], //该文件上传的后缀名
            maxFileSize: 2048000000,//文件上传的大小
            maxFileCount: 3,//文件上传的最大数量
            encoding: "multipart/form-data",
            initialPreviewAsData: true,//是否初始预览图片
            initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)
            // initialPreview: "<%=request.getContextPath()%>/file/download?filename=${m.movieImage}"//图片回显(初始预览图片地址)
        });
        $("#myFile").on("fileuploaded", function (event, data, previewId, index) {
            var result = data.response;
            if (result.code == "666") {
                var url = result.data;
                var imageText = $("#imageText").val();
                var img = "<tr>";
                img += '<td>';
                img += '<span>' + imageText + '</span>';
                img += '</td>';
                img += '<td>';
                img += '<img alt="" src="' + url + '" width="100px" height="100px">';
                img += '</td>';
                img += '<td>';
                img += '<button onclick="deleteTr(this)" type="button" className="btn btn-default" title="删除"><i className="fa fa-trash-o"></i> 删除';
                img += '</button>';
                img += '</td>';
                img += '</tr>';
                $("#images").append(img);
            } else {
                alert(result.message);
            }

        })
    })

    // 删除当前行
    function deleteTr(is) {
        $(is).parent().parent().remove();
    }

    //一级联动
    function getOne() {
        var html = getselect(0);
        $("#one").html(html);
        var moban = getMoban(0);
        $("#moban").html(moban);
        getImt(0)
    }

    //二级联动
    function getTwo(id) {
        var html = getselect(id);
        $("#two").html(html);
        $("#three").html('<option value="-1">---请选择---</option>');
        var moban = getMoban(id);
        $("#moban").html(moban);
        getImt(id);
        getType(id);
    }

    //三级联动
    function getThree(id) {
        var html = getselect(id);
        $("#three").html(html);
        var moban = getMoban(id);
        $("#moban").html(moban);
        getImt(id);
        getType(id);
    }

    //四级联动
    function getfire(id) {
        var moban = getMoban(id);
        $("#moban").html(moban);
        getImt(id);
        getType(id);
    }

    //模板ID
    function getMoban(id) {
        var aa = '';
        $.ajax({
            url: "/goods/getId",
            type: "post",
            data: {id: id},
            dataTable: "json",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    console.log(data);
                    var a = data.data;
                    if (a == null) {
                        aa = '模板ID:0'
                    } else {
                        aa += '模板ID:' + a.typeId + ''
                    }

                }
            },
            error: function (data) {

            }
        })
        return aa;
    }
    //扩展属性,规格
    function getType(id) {
        $.ajax({
            url: "/goods/getCustom",
            type: "post",
            data: {itemCatId: id},
            dataTable: "json",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var template = data.data;
                    var extend = JSON.parse(template.customAttributeItems);
                    //拼接扩展属性
                    var html = '';
                    $(extend).each(function (i, e) {
                        html+='<tr>';
                        html+="<td class='col-md-2 title'>"+e.text+"</td>";
                        html+='<td class="col-md-10"  title><input class="form-control" placeholder="'+e.text+'"></td>';
                        html+='</tr>';
                    })
                    $("#custom").html(html)
                    //规格
                    var specList = template.specificationVOList;//这个是对象不是字符串,不需要json转
                    var specHtml = '';
                    for (var i = 0; i < specList.length; i++) {
                        specHtml += '<tr><td width="200px" align="center">' + specList[i].text + '</td>';
                        specHtml += '<td>';
                        for (let j = 0; j < specList[i].optionList.length; j++) {
                            specHtml += '<span><input type="checkbox">' + specList[i].optionList[j].optionName + '</span>';
                        }
                        specHtml += '</td></tr>';
                    }
                    $("#spec_table").html(specHtml)
                }
            },
            error: function (data) {

            }
        })
    }

    //三级联动查询
    function getselect(id) {
        var html = '<option value="-1">---请选择---</option>';
        $.ajax({
            url: "/goods/getSelect",
            type: "post",
            data: {parentId: id},
            dataTable: "json",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    var catList = data.data;
                    $(catList).each(function (i, e) {
                        html += '<option value="' + e.id + '">' + e.name + '</option>'
                    })
                }
            },
            error: function (data) {

            }
        })
        return html;
    }

    //品牌
    function getImt(id) {
        $.ajax({
            url: "/goods/getImt",
            type: "post",
            data: {id: id},
            dataTable: "json",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    if (data == null) {

                    } else {
                        var a = data.data;
                        var b = a.brandIds;
                        var c = JSON.parse(b);
                        console.log(c)
                        var html = '';
                        $(c).each(function (i, e) {
                            html += '<option value="' + e.id + '">' + e.text + '</option>'
                        })
                        $("#pinpai").html(html);
                    }
                }
            },
            error: function (data) {

            }
        })
    }

    //文本框
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager: true,
            afterBlur: function () {
                this.sync();
            }

        });

    });

    //增加
    function add() {
        //商品图片
        var images = "";
        var trs = $("#images").find("tr");
        var imageList = [];
        for (var i = 0; i < trs.length; i++) {
            var tds = $(trs[i]).find("td");
            var color = $(tds[0]).text();
            var image = $(tds[1]).find("img");
            var url = $(image).attr("src");
            images = url;
            //定义一个集合放到集合里
            imageList.push({color:color,url:url});
        }
        //把json转成string类型保存
        var colorImg = JSON.stringify(imageList);


        //获取扩展属性
        var catList = [];
        var CAT_trs = $("#custom").find("tr");
        for (var i = 0; i < CAT_trs.length; i++) {
            var tds = $(CAT_trs[i]).find("td");
            var text = $(tds[0]).text();
            var text_value = $(tds[1]).find("input").val();
            catList.push({text:text,value:text_value});
        }
        //把json转成string类型保存
        var custom_attribute_items = JSON.stringify(catList);

        //获取规格
        let spectrs1 = $("#spec_table").find("tr");
        let specList = [];
        for (let i = 0; i < spectrs1.length; i++) {
            let spanList = [];
            let tds = $(spectrs1[i]).find("td");
            let name = $(tds[0]).text();
            let spans = $(tds[1]).find("span");
            for (let j = 0; j < spans.length; j++) {
                if ($(spans[j]).find("input").prop("checked")) {
                    spanList.push($(spans[j]).text())
                }
            }
            let specJson = {attributeName: name, attributeValue: spanList};
            specList.push(specJson)

        }
        let specStr = JSON.stringify(specList);

        let itemList = [];
        //获取所有行
        let spectrs = $("#spec_table_id").find("tr");
        let ths = $(spectrs[0]).find("th");
        let name1 = $(ths[0]).text().trim();
        let name2 = $(ths[1]).text().trim();
        //遍历行
        for (let i = 1; i < spectrs.length; i++) {
            let tds = $(spectrs[i]).find("td");
            //商品标题
            let title = $("#sellerId1").val().trim() +':'+ name1+':'+$(tds[0]).text().trim() + name2+':'+$(tds[1]).text().trim();
            let price = $(tds[2]).find("input").val().trim();
            let num = $(tds[3]).find("input").val().trim();
            let stockCount = $(tds[3]).find("input").val().trim();
            let categoryid = $("#three").val().trim();
            let category = $("#three").find("option:selected").text().trim();
            let brand = $("#pinpai").find("option:selected").text().trim();
            let specs = '{"网络":"移动5G","机身内存":"256G"}'
            let itemJson = {
                title:title,
                price:price,
                num:num,
                categoryid:categoryid,
                category:category,
                brand:brand,
                spec:specs,
                stockCount:stockCount};
            itemList.push(itemJson);
        }
        let item = JSON.stringify(itemList)
        console.log(item)

        alert(item)


        //三级联动
        var one = $("#one").val();
        var two = $("#two").val();
        var three = $("#three").val();
        //商品名称
        var goodsName = $("#sellerId1").val();
        //品牌
        var brandId = $("#pinpai").val();
        //副标题
        var caption = $("#fu").val();
        //价格
        var price = $("#jia").val();
        //模板id
        var typeTemplateId = $("#moban").val();
        //介绍
        var introduction = $("#editor").val();
        //列表
        var packageList = $("#bao").val();
        //售后
        var saleService = $("#shou").val();
        $.ajax({
            url: "/goods/insert",
            type: "post",
            data: {
                goodsName: goodsName,
                category1Id: one,
                category2Id: two,
                category3Id: three,
                brandId: brandId,
                caption: caption,
                price: price,
                typeTemplateId: typeTemplateId,
                introduction: introduction,
                packageList: packageList,
                itemImages:colorImg,
                customAttributeItems:custom_attribute_items,
                specificationItems:specStr,
                itemJson:item,
                saleService,
                saleService
            },
            dataTable: "json",
            async: false,
            success: function (data) {
                if (data.code == "666") {
                    alert(data.message);
                }else {
                    alert(data.message);
                }
            },
            error: function (data) {
                alert("参数异常")
            }
        })
    }
</script>

</body>

</html>